<template>
	<u-tabbar 
		:value="active"
		@change="onChange"
		fixed
		placeholder
		>
	  <u-tabbar-item v-for="(item,index) in list" :v-key="index" :dot="item.dot" :text="item.text" :icon="item.icon">
	  </u-tabbar-item>
	</u-tabbar>
	
</template>

<script>
	// import * as Api from '@/api/page.js'
	import Config from '@/util/index.js'
	export default {
		onLoad(){},
		data(){
			return{
				active: 0,
				color: "#7A7E83",
				selectedColor: "#F66B71",
				list: [
					{
						url: 'shop/index',
						text: '首页',
						name: 'eatdata',
						icon: 'home',
						dot:false
					},		
					{
						url: 'shop/order/index',
						text: '订单',
						name: 'order',
						icon: 'order',
						dot:false
					},
					{
						url: 'shop/manage/index',
						text: '管理',
						name: 'manage',
						icon: 'grid',
						dot:false
					},
					{
						url: 'shop/my/index',
						text: '我的',
						name: 'my',
						icon: 'account',
						dot:false
					}
				]
			}
		},
		onLoad(){
			this.active=this.list.findIndex(item => item.url == this.pageName)
		},
		methods: {
			onChange(event) {
		        this.active=event
				console.log("9876",this.active)
				this.$emit('setActive',this.active)
				// uni.navigateTo({
				// 	url: this.list[event].url
			//  });
			},
		    init() {
				this.active=this.list.findIndex(item => item.url == this.pageName)
			}
		}
	}
</script>
	
<style scoped>
	/* custom-tab-bar/index.wxss */
	.tab-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 48px;
	  background: white;
	  display: flex;
	  padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tab-bar-border {
	  background-color: rgba(0, 0, 0, 0.33);
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 1px;
	  transform: scaleY(0.5);
	}
	
	.tab-bar-item {
	  flex: 1;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	
	.tab-bar-item .cover-image {
	  width: 27px;
	  height: 27px;
	  font-size: 10px;
	}

</style>
